<script setup lang="ts">
import { ref, toRaw, onMounted } from "vue";
import { formRules } from "../utils/rule";
import { LabelFormProps } from "../utils/types";
import { getCategoryPage } from "@/api/basicArchives/labelmanag";
import { handleTree } from "@/utils/tree";

const treeData = ref([]);
/** 加载标签分类菜单tree */
const loadTree = async () => {
  // 获取菜单
  let params = {
    categoryName: undefined,
    pageNum: 1,
    pageSize: 999
  };
  const { data } = await getCategoryPage(params);
  treeData.value = handleTree(data.records || []);
};

const props = withDefaults(defineProps<LabelFormProps>(), {
  formInline: () => ({
    id: "",
    labelName: "",
    categoryId: undefined
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

defineExpose({ getRef });

onMounted(() => {
  loadTree();
});
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="100px"
  >
    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="标签名称" prop="labelName">
          <el-input
            v-model="newFormInline.labelName"
            clearable
            placeholder="请输入标签名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="16" class="m-auto">
        <el-form-item label="标签分类" prop="categoryId">
          <el-select
            v-model="newFormInline.categoryId"
            clearable
            class="!w-[full]"
          >
            <el-option
              v-for="item in treeData"
              :key="item.id"
              :label="item.categoryName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>
